<!--
 * @Description: 
 * @Author: Zhang_xx
 * @Date: 2025-02-18 09:34:39
 * @LastEditors: Zhang_xx
 * @LastEditTime: 2025-02-18 09:41:02
-->
<template>
    <div style="margin: 20px;">
        <SelectComp :select="select" @callback="setData"></SelectComp>
        <SelectComp :select="selectC"></SelectComp>
    </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import SelectComp from "../component/SelectComp.vue";
const selectC = ref({
  selectResult: '',
  name: '食物子项',
  data: []
})
const select = reactive({
  selectResult: '选项2',
  name: '食物',
  data: [{
    value: '选项1',
    label: '黄金糕',
    children: [
      {
        value: '选项1-1',
        label: '黄金糕1-1'
      },
      {
        value: '选项1-2',
        label: '黄金糕1-2'
      },
    ]
  }, {
    value: '选项2',
    label: '双皮奶',
    children: [
      {
        value: '选项2-1',
        label: '双皮奶2-1'
      },
      {
        value: '选项2-2',
        label: '双皮奶2-2'
      },
    ]
  }, {
    value: '选项3',
    label: '蚵仔煎'
  }, {
    value: '选项4',
    label: '龙须面'
  }, {
    value: '选项5',
    label: '北京烤鸭'
  }],
  change: (data) => {
    console.log(data)
    this.selectC.data = data
  }
})
// 方法
const setData = (data) =>{
console.log('data',data)
}
    
</script>

<style scoped>

</style>